<template>
  <div>
    <!-- TableModule  tableModule是一个对象，下面有解释 -->
    <TableModule :tableModule="tableModule" ref="TableModuleRef">
      <!-- #event是插入的新增按钮和删除按钮，具体操作按照自己的业务流程实现 -->
      <template #event>
        <el-button type="primary" @click="Add">新增</el-button>
        <el-button type="danger" @click="Delete">删除</el-button>
        <el-button @click="store.commit('setUploadAdd', true)">
          批量添加
        </el-button>
      </template>
      <!-- #tableColumn 插入表格的操作列 -->
      <template #tableColumn>
        <el-table-column align="center" fixed="right" label="操作" width="120">
          <template slot-scope="scope" #default="scope">
            <el-button @click="Edit(scope)">编辑</el-button>
          </template>
        </el-table-column>
      </template>
    </TableModule>
  </div>
  <XlsxUpload
    :url="apiUrl + upload.url"
    @addSuccess="uploadSuccess($event)"
  ></XlsxUpload>
  <!-- 单个新增弹窗 -->
  <AddFormModule :addModule="addModule"></AddFormModule>
  <!-- 编辑信息弹窗 -->
  <EditFormModule :editModule="editModule"></EditFormModule>
</template>

<script setup>
import TableModule from "@/components/TableModule.vue";
import AddFormModule from "@/components/AddFormModule.vue";
import EditFormModule from "@/components/EditFormModule.vue";
import XlsxUpload from "@/components/XlsxUpload.vue";
import { reactive, toRefs, ref, onMounted, toRaw } from "vue";
import store from "@/store";
import { toast } from "@/utils";
import { columnsData, queryData, addData, editData } from "./table"; // 引入我们配置好的数据

import { getAllList, addInfo, deleteInfo, updateInfo } from "@/api/teacher.js";

const apiUrl = import.meta.env.VITE_SERVER_URL + import.meta.env.VITE_BASE_URL;
const state = reactive({
  columns: columnsData, // 表格配置
  query: queryData, // 查询条件配置
  queryForm: {}, // 查询form表单
  add: addData, //新增表单配置
  addForm: {
    userId: 2107119188,
    name: "王强plus",
    teacherType: "外聘教师",
    department: "球类教研室",
  }, //新增表单
  edit: editData, //编辑表单配置
  editTitle: "",
  editForm: {}, //编辑表单
  editVisible: false,
  addVisible: false,
  loading: false, // 加载状态
  dataList: [], // 列表数据
  multipleSelection: [],
  upload: {
    isupload: true, //是否批量上传
    url: "/excel/import/teacher", //上传接口
  },
  pages: {
    isPagination: true,
    // 分页数据
    total: 0,
    limit: 10,
    page: 1,
  },
});

const {
  loading,
  dataList,
  columns,
  pages,
  query,
  queryForm,
  add,
  addForm,
  edit, //编辑表单配置
  editTitle,
  editForm, //编辑表单
  multipleSelection,
  addVisible,
  editVisible,
  upload,
} = toRefs(state);

const TableModuleRef = ref();

onMounted(() => {
  getDataList();
});

// 传给表格子组件的
const tableModule = ref({
  editInputBlur: editInputBlur, // 可编辑单元的，失去焦点时的回调
  callback: getDataList, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
  // 以下不说了，上面都给解释了
  queryForm: queryForm,
  columns: columns,
  dataList: dataList,
  multipleSelection: multipleSelection,
  loading: loading,
  pages: pages,
  query: query,
  upload: upload,
});

// 传给新增表单子组件的
const addModule = ref({
  editInputBlur: editInputBlur, // 可编辑单元的，失去焦点时的回调
  callback: addInfoData, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
  // 以下不说了，上面都给解释了
  addForm: addForm,
  add: add,
  addVisible: addVisible,
});

// 传给新增表单子组件的
const editModule = ref({
  editInputBlur: editInputBlur, // 可编辑单元的，失去焦点时的回调
  callback: editInfoData, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
  // 以下不说了，上面都给解释了
  editForm: editForm,
  editTitle: editTitle,
  edit: edit,
  editVisible: editVisible,
});

// 获取列表信息
async function getDataList() {
  state.loading = true;
  // 掉自己的接口，切勿复制粘贴
  // console.log(`output->getDataList`, state.queryForm);
  const { data } = await getAllList({
    pageNum: state.pages.page,
    pageSize: state.pages.limit,
    userId: state.queryForm.userId,
    userName: state.queryForm.userName,
  });
  // console.log(`output->res`, data);
  state.loading = false;
  state.dataList = data.records;
  state.pages.total = data.total;
}

// 点击新增触发弹窗
function Add() {
  addVisible.value = true;
}

//新增信息
async function addInfoData() {
  // console.log(`output->`, state.addForm);
  const res = await addInfo(state.addForm);
  // console.log(`output->addInfoData`, res);
  if (res.code == 200) {
    toast(res.data);
    addVisible.value = false;
    getDataList();
  } else {
    toast(res.data, "error");
  }
}

function Edit(row) {
  // 编辑事件
  // console.log(`output->编辑事件`, toRaw(row.row));
  state.editVisible = true;
  state.editTitle = "修改 " + toRaw(row.row).name + " 的信息";
  state.editForm = toRaw(row.row);
}
//修改信息
async function editInfoData() {
  console.log(
    `output->`,
    state.editForm
    // formatYear(state.editForm.expectedGraduationYear),
    // state.editForm.expectedGraduationYear
  );
  const res = await updateInfo(state.editForm);
  // console.log(`output->addInfoData`, res);
  if (res.code == 200) {
    toast(res.data);
    editVisible.value = false;
    getDataList();
  } else {
    toast(res.data, "error");
  }
}

function Delete() {
  // 删除事件
  toRaw(state.multipleSelection).forEach(async (item) => {
    const res = await deleteInfo({ userId: item.userId });
    // console.log(`output->res`, item.userId, res);
    if (res.code == 200) {
      toast((item.userId = "已删除"));
      getDataList();
    } else {
      toast(res.data, "error");
    }
  });
}

function editInputBlur() {
  console.log("失去焦点回调");
}

// 批量添加成功关闭窗口
function uploadSuccess(val) {
  store.commit("setUploadAdd", val);
  // selectForm.pageNum = 1;
  // initList(selectForm);
}
</script>

<style scoped></style>
